<template>
	<view>
		<!-- 搜索 -->
		<view class="page_hd">
			<view class="rtbus-searchbar-frame">
				<view class="rtbus-searchbar-button">
					<input class="rtbus-search-bar-input" 
					type="text" 
					confirm-type="search" 
					v-model="inputVal" 
					:focus="true"
					@input="searchLine"
					@confirm="confirm"
					placeholder="输入路线搜索" placeholderClass="input-placeholder"></input>
					<view class="rtbus-icon-clear" v-if="inputVal" @click="clearInput">
						<icon size="20" type="clear"></icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="page-content">
			<!-- 列表，搜索列表跟历史记录列表通用 -->
			<view v-if="lineList.length !== 0 || stationList.length !== 0">
				<view class="histroy-list">
					<block v-for="(lineItem,lineIndex) in lineList" :key="lineIndex">
						<view class="histroy-list-item" @click="selectLine(lineItem)">
							<view class="histroy-item-icon">
								<view class="iconfont icon-qichezhan"></view>
							</view>
							<view class="histroy-item-text">
								<view class="rtbus-busroute-label">{{lineItem.lineName}}</view>
								<view class="rtbus-desc-label">{{lineItem.segmentName}}</view>
							</view>
						</view>
					</block>
					<!-- 搜索站点 -->
					<view class="">
						<block v-for="(stationItem,stationIndex) in stationList" :key="stationIndex">
							<view class="histroy-list-item" @click="selectStation(stationItem)">
								<view class="histroy-item-icon">
									<view class="iconfont icon-gongjiaozhanpai"></view>
								</view>
								<view class="histroy-item-text">
									<view class="rtbus-busroute-label">{{stationItem.stationName}}</view>
								</view>
							</view>
						</block>
					</view>
				</view>
				<!-- 清楚历史记录按钮 -->
				<view class="clear-history" v-if="!showBusResult" @click="clearSearchHistory">清除历史记录</view>
			</view>
			<!-- 空提示 -->
			<view class="empty-tips" v-else>
				<u-empty v-if="showBusResult == false && (!historyListLine.length  || !historyListStation.length)" text="暂无数据" mode="search"></u-empty>
				<u-empty v-else-if="showBusResult == true && sugList.length == 0" text="未找到匹配的公交线路" mode="search"></u-empty>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				city:uni.getStorageSync('cityData').city,
				inputVal: "",//输入框内容
				showBusResult: false,//显示搜索内容 
				
				searchHistoryData:[],//历史搜索缓存数据
				
				historyListLine:[],//历史搜索数据
				historyListStation:[],//历史搜索数据
				
				sugList: [],//搜索到的线路数组
				transitStation:[],//最终显示的站点数据
				
				lineList:[],//最终显示的公交数据
				stationList:[]//最终显示的站点数据
			};
		},
		onLoad() {
			// 搜索的线路-记录
			if(!uni.getStorageSync('searchHistoryData') 
			&& !uni.getStorageSync('searchHistoryData').length !== 0){
				this.searchHistoryData = [];
			}else{
				this.searchHistoryData = uni.getStorageSync('searchHistoryData');
			}
			
			this.showBusLine();
		},
		methods:{
			// 判断显示搜索结果还是历史数据
			showBusLine(){
				var that = this;
				if(that.showBusResult){
					that.lineList = that.sugList;
					that.stationList = that.transitStation;
					// console.log(JSON.stringify(that.stationList));
				}else{
					
					for(var i=0;i<that.searchHistoryData.length;i++){
						if(that.city == that.searchHistoryData[i].city){
							that.lineList = that.searchHistoryData[i].lineList;
							that.stationList = that.searchHistoryData[i].stationList;
							
							that.historyListLine = that.searchHistoryData[i].lineList;
							that.historyListStation = that.searchHistoryData[i].stationList;
						}
					}
				}
				
			},
			// 监听软键盘搜索按钮
			confirm(e){
				this.inputVal = e.target.value;
				this.searchLine();
			},
			// 搜索按钮
			searchLine(){
				if( this.inputVal.length == 0){
					this.sugList = [];
					this.showBusResult = false;
					this.showBusLine();
				}else{
					this.searchRealBusLine();//搜索bus
				}
			},
			clearInput(){ //输入框清空
				this.inputVal = "";
				this.sugList = [];
				this.showBusResult = false;
				this.showBusLine();
			},
			// 搜索
			searchRealBusLine(){
				let that = this;
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let cityData = uni.getStorageSync('cityData');
				// console.log(JSON.stringify(cityData));
				this.$request({
					url: that.$API.getLineCityName,
					data: {
						"lineName": that.inputVal,
						"city":cityData.city
					},
					header: header,
					isShowLoading:true,
					lodingText:'加载中...'
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						that.showBusResult = true;
						that.sugList = [];
						that.transitStation = [];
						if(res.data.segmentLine.length !== 0){
							that.sugList = res.data.segmentLine;
						}
						if(res.data.transitStation.length !== 0){
							that.transitStation = res.data.transitStation;
						}
						that.showBusLine();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
				
			},
			// 跳转详情
			selectLine(item){
				// 缓存搜索历史
				this.setHistory('line',item);
				// 跳转页面
				uni.navigateTo({
					url: `/pages/real_bus/xr_line_detail_1?source=2&stationName=&lineId=${item.lineId}&drivingDirection=${item.drivingDirection}`
				})
			},
			// 跳转站点经过线路列表
			selectStation(item){
				// 缓存搜索历史
				this.setHistory('station',item);
				// 跳转页面
				uni.navigateTo({
					url: `/pages/real_bus/xr_search_station_list?stationName=${item.stationName}`
				})
			},
			// 缓存搜索历史记录-线路
			setHistory(type,item){
				let that = this;
				// console.log(JSON.stringify(that.searchHistoryData));
				let flagCity = true;//是否有当前城市缓存
				
				if(that.searchHistoryData.length !== 0){
					for(let i=0;i<that.searchHistoryData.length;i++){
						// 先判断是否有当前城市-搜索缓存
						if(that.city == that.searchHistoryData[i].city){
							flagCity = false;
							let flag = true;
							let listData = [];
							if(type == 'line'){
								listData = that.searchHistoryData[i].lineList;
							}else{
								listData = that.searchHistoryData[i].stationList;
							}
							if(listData.length !== 0){
								listData.forEach(listItem=>{
									if(type == 'line'){
										if(listItem.segmentId === item.segmentId){
											flag = false;
										}
									}else{
										if(listItem.stationName === item.stationName){
											flag = false;
										}
									}
								})
							}
							// 缓存选中线路，已缓存的
							if(flag){
								listData.push(item);
								if(type == 'line'){
									that.searchHistoryData[i].lineList = listData;
								}else{
									that.searchHistoryData[i].stationList = listData;
								}
								uni.setStorageSync('searchHistoryData',that.searchHistoryData);
							}
						}
					}
				}
				if(flagCity){
					// 没有搜索的线路或站点
					var historyData = {
						city:that.city,
						lineList:[],
						stationList:[]
					}
					if(type == 'line'){
						historyData.lineList.push(item);
					}else{
						historyData.stationList.push(item);
					}
					that.searchHistoryData.push(historyData);
					uni.setStorageSync('searchHistoryData',that.searchHistoryData);
				}
				
			},
			// 清空全部历史记录
			clearSearchHistory() {
			    var that = this;
			    uni.showModal({
			        title: "提示",
			        content: "清空历史记录？",
			        confirmColor: "#427CFF",
			        confirmText: "清空",
			        success: function (e) {
			            if (e.confirm) try {
							that.removeHistoryLine();
			            } catch (e) {
			                that.$u.toast(e.msg);
			            }
			        }
			    });
			},
			// 清除历史记录
			removeHistoryLine(){
				let that = this;
				for(var i=0;i<that.searchHistoryData.length;i++){
					if(that.city == that.searchHistoryData[i].city){
						that.searchHistoryData[i].lineList = [];
						that.searchHistoryData[i].stationList = [];
					}
				}
				uni.setStorageSync('searchHistoryData',that.searchHistoryData);
				this.showBusLine();
			}
		}
	}
</script>

<style lang="scss">
	// 顶部搜索框
	.page_hd {
		background: #fff;

		.rtbus-searchbar-frame {
			padding: 20rpx 28rpx;
			border-bottom: 1rpx solid #f2f2f2;
			box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.06);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.rtbus-searchbar-button {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				border-radius: 14rpx;
				background: #f6f6f6;
				padding: 0 20rpx;

				.rtbus-search-bar-input {
					height: 90rpx;
					// border: 1px solid red;
					width: 90%;
					font-size: 28rpx;
					// color: rgba(128, 128, 128, 1);
					// opacity: 0.6;
				}

				.rtbus-icon-clear {
					.icon {
						height: 40rpx;
						width: 40rpx;
					}
				}
			}
		}
	}
	
	// 内容列表
	.page-content{
		background: #ffffff;
		.histroy-list{
			padding: 0 40rpx;
			.histroy-list-item{
				display: flex;
				align-items: center;
				align-content: center;
				
				.histroy-item-icon{
					margin-right: 30rpx;
					// background-color: green;
					.icon-qichezhan{
						font-size: 40rpx;
						color: #707070;
					}
					.icon-gongjiaozhanpai{
						font-size: 50rpx;
						color: #707070;
					}
				}
				.histroy-item-text{
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					width: 100%;
					padding: 20rpx 0rpx;
					border-bottom: 1rpx solid #f2f2f2;
					.rtbus-busroute-label{
					}
					.rtbus-desc-label{
						padding-top: 4rpx;
						color: #777777;
					}
				}
			}
		}
		.clear-history{
			padding: 30rpx;
			text-align: center;
			color: #777777;
			font-size: 32rpx;
		}
	}
	
	.empty-tips{
		height: calc(100vh - var(--window-top) - 135rpx);
		padding: 50px 0;
		background-color: #f8f8f8;
	}

	.input-placeholder {
		color: #888888;
		font-size: 28rpx;
	}
</style>
